<script lang="ts" setup>
import { useTemporaryStore } from '@/stores/temporary'

const temporaryStore = useTemporaryStore()
const { value } = defineProps({
  value: {
    type: Number,
    default: 0
  }
})

const roleId = ref<number>(0)

watch(
  () => value,
  (val) => {
    roleId.value = val
  },
  {
    immediate: true
  }
)

const emit = defineEmits(['update'])

onMounted(() => {
  roleId.value = temporaryStore.roleList[0].id
})
</script>

<template>
  <el-form-item class="w-52" label="权限" prop="roleId">
    <el-select v-model="roleId" @change="emit('update', roleId)">
      <el-option v-for="i in temporaryStore.roleList" :key="i.name" :label="i.name" :value="i.id" />
    </el-select>
  </el-form-item>
</template>
<style lang="scss" scoped></style>
